<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/student/index' }">实训项目</el-breadcrumb-item>
                <el-breadcrumb-item>影院网站数据分析系统 - 制作项目简介</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box">
            <div class="content-title">
                <i class="iconfont icon-chanpinjiejuefangan"></i>案例展示
            </div>
            <div class="production-project-show">
                <el-upload
                    class="upload-demo"
                    action="123"
                    :on-remove="handleRemove"
                    :before-upload="beforeAvatarUpload"
                    :file-list="fileList"
                    :multiple="true"
                    list-type="picture"
                    :on-change='changeUpload'>
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">仅能上传图片格式文件。</div>
                </el-upload>
            </div>
            <div class="content-title">
                <i class="iconfont icon-jieshao"></i>案例介绍
            </div>
            <div class="production-project-introduction">
                <div class="production-project-introduction-editor">
                    <!-- <vue-editor v-model="introductionEditor" :editorToolbar="customToolbar"></vue-editor> -->
                    <div ref="editor" style="text-align:left"></div>
                </div>
            </div>
            <div class="content-title">
                <i class="iconfont icon-mubiao1"></i>案例目标
            </div>
            <div class="production-project-target">
                <div class="production-project-target-box">
                    <el-input  type="textarea" maxlength="500" @input="targetInput" v-model="targetValue"></el-input>
                    <span>{{targetNumber}}/500</span>
                </div>
            </div>
            <div class="content-title">
                <i class="iconfont icon-shujuyuan"></i>数据源介绍
            </div>
            <div class="production-project-data">
                <div class="production-project-data-item" v-for="(item, index) in dataIntroduction" :key="index">
                    <div class="production-project-data-item-name">
                        <span>数据源名称</span>
                        <el-input maxlength="50" v-model="item.dataName" @input="dataNameInput(item)"></el-input>
                        <em>{{item.dataNameSize}}/50</em>
                    </div>
                    <div class="production-project-data-item-content">
                        <span>数据来源</span>
                        <el-input type="textarea" maxlength="500" v-model="item.dataContent" @input="dataContentInput(item)"></el-input>
                        <em>{{item.dataContentSize}}/500</em>
                    </div>
                    <div class="production-project-data-item-delete" @click.prevent="dataRemoveFn(item)">x</div>
                </div>
                <div class="production-project-data-item" @click="dataAddFn">
                    <div class="production-project-data-item-add">+</div>
                </div>
            </div>
            <div class="content-title">
                <i class="iconfont icon-jishuzhichi"></i>技术应用
            </div>
            <div class="production-project-application">
                <div style="width:800px; height:40px; margin-bottom: 10px;"
                    v-for="(domain, index) in appDomains" :key="index">
                    <el-select
                        v-model="domain.appNameValue"
                        placeholder="请选择技术应用"
                        value-key="value"
                        style="float:left; width:170px;" @change="appNameChange(domain)">
                        <el-option
                        v-for="item in domain.appNameStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select
                        v-model="domain.appNamePointValue"
                        placeholder="请选择技术点"
                        multiple
                        collapse-tags
                        value-key="value"
                        style="float:left; min-width:240px;">
                        <el-option
                        v-for="item in domain.appNamePointStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button v-if="appDomains.length != 1" style="float:left;" @click.prevent="appRemoveDomains(domain)">删除</el-button>
                </div>
                <div class="production-project-application-add"  @click="appAddDomains">+</div>
            </div>
            <div class="content-title">
                <i class="iconfont icon-liuchengsheji"></i>流程设计
            </div>
            <div class="production-project-flow">
                <div class="production-project-flow-title">
                    流程展示 >
                </div>
                <div class="production-project-flow-content">
                    <div class="production-project-flow-box">
                        <div class="production-project-flow-step-box">
                            <div class="step-item" v-for="(item, index) in flowDomains" :key="index">
                                <el-input type="textarea" maxlength="20" @input="flowInput(item)" v-model="item.flowTextarea"></el-input>
                                <div class="text-delete">
                                    <i class="iconfont icon-jianhao" @click.prevent="flowRemoveDomains(item)"></i>
                                    <em>{{item.flowTextareaNumber}}/20</em>
                                </div>
                            </div>
                        </div>
                        <div class="production-project-flow-step">
                            <div class="step-item" v-for="(item, index) in flowDomains" :key="index">
                                <span class="item-point"></span>
                                <span class="item-line"></span>
                                <div class="item-add" v-if="(flowDomains.length-1) == index">
                                    <i class="iconfont icon-add" @click="flowAddDomains"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="production-project-flow-title">
                    流程说明 >
                </div>
                <div class="production-project-flow-editor">
                    <!-- <vue-editor v-model="descEditor" :editorToolbar="customToolbar"></vue-editor> -->
                    <div ref="editor2" style="text-align:left"></div>
                </div>
            </div>
            <div class="business-editor">
               <div class="editor-box">
                    <!-- <vue-editor v-model="htmlForEditor"></vue-editor> -->
                    <div class="step-btn-box">
                        <el-button type="primary" @click="goStep()">步骤制作</el-button>
                        <el-button type="primary" @click="projectTargetFn">实训案例目标</el-button>
                    </div>
                    <div class="editor-btn-box">
                        <el-button type="primary" @click.prevent="saveFn">保存</el-button>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog class="add-virtual-dialog" title="虚机配置" :visible.sync="dialogFormVisible" width='500px'>
            <el-form :model="form" :rules="rules" ref="form" label-width="130px">
                <el-form-item label="类型 :">
                    <el-radio-group v-model="form.radioType">
                        <el-radio :label="0">单节点</el-radio>
                        <el-radio :label="1">集群</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div>
                    <el-form-item v-if="form.radioType == 0" label="镜像名称 :" prop="mirrorValue">
                        <el-select
                            v-model="form.mirrorValue"
                            placeholder="请选择镜像"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.mirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="form.radioType == 0" label="虚机配置 :" prop="virtualValue">
                        <el-select
                            v-model="form.virtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.virtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <el-form-item v-if="form.radioType == 1" label="从节点数 :">
                    <div class="virtual-step">
                        <ul>
                            <li v-for="(item, index) in form.virtualStepList" @click="addClass(((index+1)*2))" :class="{ active:((index+1)*2) == form.virtualStepCurrent}">{{item.value}}</li>
                        </ul>
                    </div>
                </el-form-item>
                <div class="item-node" v-if="form.radioType == 1">
                    <el-form-item
                        style="width:270px; float:left;"
                        label="主节点(master):"
                        prop="masterMirrorValue"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.masterMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.masterMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        style="width:150px; float:left; margin-left:10px;"
                        prop="masterVirtualValue"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        label-width="0"
                        >
                        <el-select
                            v-model="form.masterVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.masterVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="item-node" v-if="form.radioType == 1">
                    <el-form-item
                        v-if="form.virtualStepCurrent == 2 || form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave1):"
                        :prop="'formDomains.' + 0 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[0].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[0].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 2 || form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 0 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[0].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[0].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 2 || form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave2):"
                        :prop="'formDomains.' + 1 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[1].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[1].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 2 || form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 1 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[1].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[1].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave3):"
                        :prop="'formDomains.' + 2 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[2].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[2].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 2 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[2].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[2].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave4):"
                        :prop="'formDomains.' + 3 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[3].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[3].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 3 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[3].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[3].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave5):"
                        :prop="'formDomains.' + 4 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[4].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[4].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 4 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[4].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[4].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave6):"
                        :prop="'formDomains.' + 5 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[5].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[5].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 5 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[5].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[5].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="submitForm('form')">保存</el-button>
            </div>
        </el-dialog>
        <el-dialog class="add-project-target-dialog" title="案例目标" :visible.sync="projectTargetVisible" width='500px'>
            <el-input type="textarea" maxlength="500" @input="addTargetInput" v-model="addTargetValue"></el-input>
            <em>{{addTargetNumber}}/500</em>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="addTargetSave">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { VueEditor } from 'vue2-editor'
    import { mapState } from 'vuex'
    import E from 'wangeditor'
    export default {
        components: {
            VueEditor
        },
        data () {
            return {
                projectId: '',
                //判断是否有步骤弹窗
                vmTemplateFlag: '',
                //章節ID
                presetChapterId: '',
                //案例介绍
                introductionEditor: '',
                //流程设计说明
                descEditor: '',
                customToolbar: [
                    [{ header: [false, 1, 2, 3, 4, 5, 6] }],
                    ["bold", "italic", "underline", "strike"], // toggled buttons
                    [
                        { align: "" },
                        { align: "center" },
                        { align: "right" },
                        { align: "justify" }
                    ],
                    ["blockquote", "code-block"],
                    [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
                    [{ indent: "-1" }, { indent: "+1" }],
                    ["link", "image"],
                    ["clean"]
                ],
                //图片集合
                fileList: [],
                //案例目标
                targetNumber: 500,
                targetValue: '',
                //数据源介绍
                dataIntroduction: [
                    {
                        dataName: '',
                        dataNameSize: 50,
                        dataContent: '',
                        dataContentSize: 500
                    }
                ],
                //技术应用
                appDomains: [
                    {
                        appNameStatus: [],
                        appNameValue: '',
                        appNamePointStatus: [],
                        appNamePointValue: []
                    }
                ],
                //技术应用右侧select数据
                appDomainsSkillData: [],
                //流程展示
                flowDomains: [
                    {
                        id: 0,
                        flowTextarea: '',
                        flowTextareaNumber: 20
                    }
                ],
                //步骤制作弹窗
                form: {
                    radioType: 0,
                    mirrorStatus: [],
                    mirrorValue:'',
                    virtualStatus: [],
                    virtualValue: '',
                    virtualStepList: [
                        { value: 2 },
                        { value: 4 },
                        { value: 6 }
                    ],
                    virtualStepCurrent: 2,
                    masterMirrorStatus: [], //主节点
                    masterMirrorValue: '',
                    masterVirtualStatus: [],
                    masterVirtualValue: '',
                    formDomains: [
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        },
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        },
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        },
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        },
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        },
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        }
                    ]
                },
                dialogFormVisible: false,
                //表单验证
				rules: {
                    mirrorValue: [
                        { required: true, message: '请选择镜像', trigger: 'blur' }
                    ],
                    virtualValue: [
                        { required: true, message: '请选择虚机配置', trigger: 'blur' }
                    ]
                },
                //案例目标弹窗
                projectTargetVisible: false,
                //案例目标弹窗数据
                addTargetValue: '',
                addTargetNumber: 500,
                editorContent: ''
            }
        },
        created () {
            this.projectId = JSON.parse(window.localStorage.getItem('teacher-project-id')).itemId
            this.init() //初始化
            this.selectInit()   //初始化技术应用列表
            this.initStepSelect()   //初始化步骤弹窗列表
            this.initTarget()       //初始化案例目标弹窗
        },
        computed:{
			...mapState(['chapterType'])
        },
        mounted() {
            var editor = new E(this.$refs.editor)
            editor.customConfig.onchange = (html) => {
                this.editorContent = html
            }
            editor.customConfig.uploadImgShowBase64 = true
            editor.create()

            var editor2 = new E(this.$refs.editor2)
            editor2.customConfig.onchange = (html) => {
                this.editorContent2 = html
            }
            editor2.customConfig.uploadImgShowBase64 = true
            editor2.create()
        },
        methods: {
            init() {
                let self = this
                self.$http.get('/dataplatform/description/detail?itemId='+self.projectId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.vmTemplateFlag = res.data.vmTemplateFlag
                        self.presetChapterId = res.data.presetChapterId
                        if(!res.data.firstFlag){
                            self.introductionEditor = res.data.introduction
                            self.targetValue = res.data.presetTarget
                            self.descEditor = res.data.designDescription
                            self.fileList = []
                            for (let i = 0; i < res.data.picNameList.length; i++) {
                                let picNameJson = {}
                                picNameJson.name = res.data.picNameList[i].fileName
                                picNameJson.url = res.data.picNameList[i].mappingFilePath
                                self.fileList.push(picNameJson)
                            }
                            self.dataIntroduction = []
                            for (let i = 0; i < res.data.dataSourceList.length; i++) {
                                let dataSourceJson = {}
                                dataSourceJson.dataName = res.data.dataSourceList[i].name
                                dataSourceJson.dataNameSize = 50 - (res.data.dataSourceList[i].name.length)
                                dataSourceJson.dataContent = res.data.dataSourceList[i].source
                                dataSourceJson.dataContentSize = 500 - (res.data.dataSourceList[i].source.length)
                                self.dataIntroduction.push(dataSourceJson)
                            }
                            let appNameStatus = self.appDomains[0].appNameStatus
                            if(res.data.skillList.length > 0){
                                self.appDomains = []
                            }
                            for (let i = 0; i < res.data.skillList.length; i++) {
                                let skillListJson = {}
                                skillListJson.appNameStatus = appNameStatus
                                skillListJson.appNameValue = res.data.skillList[i].application
                                skillListJson.appNamePointStatus = []
                                for (let j = 0; j < self.appDomainsSkillData.length; j++) {
                                    if(skillListJson.appNameValue == self.appDomainsSkillData[j].id){
                                        for (let e = 0; e < self.appDomainsSkillData[j].skillList.length; e++) {
                                            let appNamePointJson = {}
                                            appNamePointJson.label = self.appDomainsSkillData[j].skillList[e].name
                                            appNamePointJson.value = self.appDomainsSkillData[j].skillList[e].id
                                            skillListJson.appNamePointStatus.push(appNamePointJson)
                                        }
                                    }
                                }
                                skillListJson.appNamePointValue = res.data.skillList[i].skillList
                                self.appDomains.push(skillListJson)
                            }
                            self.flowDomains = []
                            for (let i = 0; i < res.data.stepList.length; i++) {
                                let flowDomainJson = {}
                                flowDomainJson.id = res.data.stepList[i].id
                                flowDomainJson.flowTextarea = res.data.stepList[i].name
                                flowDomainJson.flowTextareaNumber = 20 - (res.data.stepList[i].name.length)
                                self.flowDomains.push(flowDomainJson)
                            }
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //初始化技术应用列表
            selectInit(){
                let self = this
                self.$http.get('/dataplatform/description/skillApplication').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        for (let i = 0; i < res.data.applicationData.length; i++) {
                            let appNameJson = {}
                            appNameJson.value = res.data.applicationData[i].id
                            appNameJson.label = res.data.applicationData[i].name
                            for (let j = 0; j < self.appDomains.length; j++) {
                                self.appDomains[j].appNameStatus.push(appNameJson)
                            }
                        }
                        self.appDomainsSkillData = res.data.skillData
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            initStepSelect(){
                let self = this
                self.form.mirrorStatus = []
                self.form.masterMirrorStatus = []
                self.form.virtualStatus = []
                self.form.masterVirtualStatus = []
                self.$http.post('/dataplatform/manage/vmConfig/vmConfigDropDownList').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        //镜像
                        for(let i = 0; i < res.data.imageDropDownList.length; i++){
                            let mirrorJson = {}
                            mirrorJson.label = res.data.imageDropDownList[i].value
                            mirrorJson.value = res.data.imageDropDownList[i].key
                            self.form.mirrorStatus.push(mirrorJson)         //单节点镜像
                            self.form.masterMirrorStatus.push(mirrorJson)   //主节点镜像
                            for (let j = 0; j < self.form.formDomains.length; j++) {
                                self.form.formDomains[j].formMirrorStatus = []
                                self.form.formDomains[j].formMirrorStatus.push(mirrorJson)
                            }
                        }
                        //虚机
                        for(let i = 0; i < res.data.hostDropDownList.length; i++){
                            let virtuaJson = {}
                            virtuaJson.label = res.data.hostDropDownList[i].value
                            virtuaJson.value = res.data.hostDropDownList[i].key
                            self.form.virtualStatus.push(virtuaJson)        //单节点虚机
                            self.form.masterVirtualStatus.push(virtuaJson)  //主节点虚机
                            for (let j = 0; j < self.form.formDomains.length; j++) {
                                self.form.formDomains[j].formVirtualStatus = []
                                self.form.formDomains[j].formVirtualStatus.push(virtuaJson)
                            }
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //初始化案例目标弹窗
            initTarget(){
                let self = this
                self.$http.get('/dataplatform/chapter/custom/getTarget?itemId='+ self.projectId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.addTargetValue = res.data
                        self.addTargetNumber = 500 - (res.data.length)
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //案例目标
            targetInput(){
                var txtVal = this.targetValue.length;
                this.targetNumber = 500 - txtVal
            },
            //数据源码添加
            dataAddFn(){
                this.dataIntroduction.push({
                    dataName: '',
                    dataNameSize: 50,
                    dataContent: '',
                    dataContentSize: 500
                })
            },
            //数据源码删除
            dataRemoveFn(item){
                var index = this.dataIntroduction.indexOf(item)
                if (index !== -1) {
                    this.dataIntroduction.splice(index, 1)
                }
            },
            //数据源码名称字数限制
            dataNameInput(item){
                var index = this.dataIntroduction.indexOf(item)
                var txtVal = this.dataIntroduction[index].dataName.length;
                this.dataIntroduction[index].dataNameSize = 50 - txtVal
            },
            //数据源码数据来源字数限制
            dataContentInput(item){
                var index = this.dataIntroduction.indexOf(item)
                var txtVal = this.dataIntroduction[index].dataContent.length;
                this.dataIntroduction[index].dataContentSize = 500 - txtVal
            },
            //技术应用添加
            appAddDomains(){
                this.appDomains.push({
                    appNameStatus: this.appDomains[0].appNameStatus,
                    appNameValue: '',
                    appNamePointStatus: [],
                    appNamePointValue: []
                })
            },
            //技术应用删除
            appRemoveDomains(item) {
                var index = this.appDomains.indexOf(item)
                if (index !== -1) {
                    this.appDomains.splice(index, 1)
                }
            },
            //技术应用change
            appNameChange(item){
                var index = this.appDomains.indexOf(item)
                for (let i = 0; i < this.appDomainsSkillData.length; i++) {
                    if(this.appDomains[index].appNameValue == this.appDomainsSkillData[i].id){
                        this.appDomains[index].appNamePointStatus = []
                        this.appDomains[index].appNamePointValue = []
                        for (let j = 0; j < this.appDomainsSkillData[i].skillList.length; j++) {
                            let appNamePointJson = {}
                            appNamePointJson.label = this.appDomainsSkillData[i].skillList[j].name
                            appNamePointJson.value = this.appDomainsSkillData[i].skillList[j].id
                            this.appDomains[index].appNamePointStatus.push(appNamePointJson)
                        }
                    }
                }
            },
            //流程字数限制
            flowInput(item){
                var index = this.flowDomains.indexOf(item)
                var txtVal = this.flowDomains[index].flowTextarea.length;
                this.flowDomains[index].flowTextareaNumber = 20 - txtVal
            },
            //流程添加
            flowAddDomains(){
                this.flowDomains.push({
                    id: 0,
                    flowTextarea: '',
                    flowTextareaNumber: 20
                })
            },
            //流程删除
            flowRemoveDomains(){
                var index = this.flowDomains.indexOf(item)
                if (index !== -1) {
                    this.flowDomains.splice(index, 1)
                }
            },
            //保存
            saveFn() {
                let self = this
                let fileNameList = []
                for(let i = 0; i < self.fileList.length; i++){
                    fileNameList.push(self.fileList[i].name)
                }
                //数据源
                let dataSourceList = []
                for(let i = 0; i < self.dataIntroduction.length; i++){
                    let dataSourceJson = {}
                    dataSourceJson.name = self.dataIntroduction[i].dataName
                    dataSourceJson.source = self.dataIntroduction[i].dataContent
                    dataSourceList.push(dataSourceJson)
                }
                //技术应用
                let skillList = []
                for(let i = 0; i < self.appDomains.length; i++){
                    let skillListJson = {}
                    skillListJson.application = self.appDomains[i].appNameValue
                    skillListJson.skillList = self.appDomains[i].appNamePointValue
                    skillList.push(skillListJson)
                }
                //流程展示
                let stepIdNames = []
                for(let i = 0; i < self.flowDomains.length; i++){
                    let stepIdNamesJson = {}
                    stepIdNamesJson.id = self.flowDomains[i].id
                    stepIdNamesJson.name = self.flowDomains[i].flowTextarea
                    stepIdNames.push(stepIdNamesJson)
                }
                let data = {
                    dataSourceList: dataSourceList,
                    designDescription: self.descEditor,
                    introduction: self.introductionEditor,
                    itemId: self.projectId,
                    picNames: fileNameList,
                    presetTarget: self.targetValue,
                    skillList: skillList,
                    stepIdNames: stepIdNames
                }
                self.$http.post('/dataplatform/description/update',data).then(response => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        self.init()
                        self.initStepSelect()
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //跳转step获取章节ID
            goStep(){
                let self = this
                if(self.vmTemplateFlag){
                    self.dialogFormVisible = true
                }else{
                    self.$store.commit('updateChapterType', self.presetChapterId)
                    self.$router.push({
                        path: '/teacher/projectTrainingStep'
                    })
                }
            },
            //案例目标
            projectTargetFn(){

            },
            //图片上传
            changeUpload(file, fileList) {
                this.fileList = fileList
            },
            // 图片长传-之前
            beforeAvatarUpload(file,fileList) {
                let self = this
                if(file.type !== 'image/jpeg' && file.type !== 'image/jpg' && file.type !== 'image/png' && file.type !== 'image/bmp'){
                    self.$message.error('上传图片格式只能是 jpg,png,jpeg,bmp 格式!')
                    return
                }
                let fd = new FormData()
                    fd.append('files', file)
                    fd.append('width', 640)
                    fd.append('high', 380)
                self.$http.post('/dataplatform/common/upload/file',fd).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.fileNameList = []
                        for(let i = 0; i < res.data.length; i++){
                            let fileJson = {}
                            let fileNameJson = {}
                            fileJson.name = res.data[i].fileName
                            fileJson.url = res.data[i].mappingFilePath
                            self.fileList.push(fileJson)
                            self.fileNameList.push(res.data[i].fileName)
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            handleRemove(file, fileList) {
                this.fileList = fileList
            },
            //弹窗step切换
            addClass:function(index){
                this.form.virtualStepCurrent = index
            },
            //添加学生表单提交
            submitForm(formName) {
                let self = this
				self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = {}
                        if(self.form.radioType == 0){
                            data = {
                                projectId: self.projectId,
                                isCluster: self.form.radioType,
                                mainImageId: self.form.mirrorValue,
                                mainHostId: self.form.virtualValue
                            }
                        }else if(self.form.radioType == 1){
                            let cluterArr = []
                            let formDomains = self.form.formDomains.slice(0,self.form.virtualStepCurrent)
                            for(let i = 0; i < formDomains.length; i++){
                                let clusterJson = {}
                                clusterJson.imageId = formDomains[i].formMirrorValue
                                clusterJson.hostId = formDomains[i].formVirtualValue
                                cluterArr.push(clusterJson)
                            }
                            data = {
                                projectId: self.projectId,
                                isCluster: self.form.radioType,
                                mainImageId: self.form.masterMirrorValue,
                                mainHostId: self.form.masterVirtualValue,
                                cluster: cluterArr
                            }
                        }
                        self.$http.post('/dataplatform/manage/vmConfig/saveConfig',data).then((response) => {
                            let res = response.data
                            if(res.code == '200'){
                                self.dialogFormVisible = false
                                self.$refs[formName].resetFields()
                                self.$store.commit('updateChapterType', self.presetChapterId)
                                self.$router.push({
                                    path: '/teacher/projectTrainingStep'
                                })
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //添加案例目标
            projectTargetFn(){
                this.projectTargetVisible = true
            },
            addTargetInput(){
                var txtVal = this.addTargetValue.length;
                this.addTargetNumber = 500 - txtVal
            },
            //添加目标保存
            addTargetSave(){
                let self = this
                self.$http.post('/dataplatform/chapter/custom/updateTarget',{
                    itemId: self.projectId,
                    target: self.addTargetValue
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                        self.projectTargetVisible = false
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            }
        }
    }
</script>
